<template>
	<view class="sw-page">
		<cu-bar bgColor="nav-bg-blue" style="color: #FFFFFF;" :isBack="true" :isSearch="false" placeholder="搜索公交路线 车站"></cu-bar>
		<view class="sw-oprate grid grid-square col-2 bg-white">
			<view class="action sw-action">
				<text class="icon-bus-alt"></text>
				<text class="sw-title">定制公交</text>
			</view>
			<view class="action sw-action" @click="toPlan()">
				<text class="icon-lujingguihua"></text>
				<text class="sw-title">线路规划</text>
			</view>
		</view>
		<sw-car-list :carList="carList"></sw-car-list>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import swCarList from '@/components/sw-car-list/sw-car-list.vue'
	export default {
		data() {
			return {
				city:'淮安',
				InputBottom: 0,
				carList:[]
			}
		},
		components: {
			swCarList
		},
		created() {
			this.listenPosition()
		},
		computed:{
			...mapState(['position','akey']),
		},
		methods: {
			toSearch(){
				console.log(1111111111);
				uni.navigateTo({
					url:'/pages/home/search'
				})
			},
			toPlan(){
				uni.navigateTo({
					url: '/pages/home/roadplan'
				})
			},
			getEBike(position){
				uni.request({
					url: 'https://api.hajhkj.cn/ebike/v2/platform/gFence/around?location='+position.lng+','+position.lat+'&type=2',
					method: 'GET',
					header:{
						'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MDQxOGY2ZDcxN2MzNjAwMDE3Mzg5MTAiLCJwaG9uZSI6IjE4NTA3MTUyMTg1IiwiYWdlbnRJZCI6IjIiLCJidWlsZCI6IjMuMy4xMyIsImRldklkIjoiZmVuZ3l1LTgxMWE5NGRmLTYzMjgtNDU1NS1hMGNmLWJjZDRiZTJjZmY4ZiIsImlhdCI6MTYyMzMwODAwMX0.TuW8RddacwdW-BjUDoOwpA2xhIQZ2R0nQt5_kqa2Vy8',
						'Connection': 'Keep-Alive',
						'Accept-Encoding': 'gzip'
					},
					success(result) {
						console.log(result)
					}
				})
			},
			nearBus(position){
				let that = this
				uni.request({
					url:'https://restapi.amap.com/v3/place/around?location='+position.lng+','+position.lat+'&s=rsv3&children=&key='+this.akey+'&radius=1500&offset=4&page=1&city='+this.city+'&language=zh_cn&platform=JS&logversion=2.0&sdkversion=1.4.17&keywords=%E5%85%AC%E4%BA%A4%E7%AB%99%E7%82%B9',
					method:'GET',
					success(result) {
						console.log(result)
						if(typeof result == 'string'){
							result = JSON.parse(result)
						}
						console.log(result)
						let data = result.data;
						if(data.pois.length > 0){
							let id = data.pois[0].id
							let name = data.pois[0].name
							let local_name = name
							let bus_address = data.pois[0].address
							let distance = 	Math.floor(data.pois[0].distance)
							bus_address = bus_address.split(';')
							bus_address.forEach(function(item,index){
								that.addressInfo(id,item,local_name,distance)
							})
						}
					}
				})
			},
			addressInfo(id,line_name,local_name,distance){
				let that = this
				uni.request({
					url:'https://restapi.amap.com/v3/bus/linename?s=rsv3&extensions=all&key='+this.akey+'&output=json&pageIndex=1&city='+this.city+'&offset=10&keywords='+line_name+'&platform=JS&logversion=2.0&sdkversion=1.4.17',
					method:'GET',
					success(result){
						result = JSON.parse(JSON.stringify(result))
						if(typeof result.data !== 'undefined'){
							that.carList.push({
								id: id,
								name: line_name,
								site: local_name.substr(0,local_name.indexOf("(")),
								distance: distance,
								index: 0,
								carInfo: result.data.buslines
							})
						}
						if(typeof result.buslines !== 'undefined'){
							that.carList.push({
								id: id,
								name: line_name,
								site: local_name,
								distance: distance,
								index: 0,
								carInfo: result.buslines
							})
						}
					}
				})
			},
			listenPosition: function(){
				var that = this;
				that.nearBus(this.position)
				that.getEBike(this.position)
			}
		}
	}
</script>

<style>
.sw-page{
	background: -webkit-linear-gradient(#3c92f5,#3c92f5, #f3f0f0, #f3f0f0, #f3f0f0, #f3f0f0);
	height: 100vh;
}
.sw-action{
	line-height: 180rpx;
}
.sw-action text[class*="icon"]{
	font-size: 80rpx;
	color: #3c92f5;
	margin-left: 60rpx;
	margin-right: 20rpx;
}
.sw-action .sw-title{
	line-height: 80rpx;
}
.sw-oprate{
	height: 180rpx;
	border-radius: 10rpx;
	margin: 20rpx;
	
}
</style>
